<template>
  <div class="switch-item">
    <transition-group tag="ul" appear name="zoom" v-if="amin">
      <li v-for="(item) in list.list" :key="item | getId" @click="toPage(item)" :title="item.title">
        <svg class='icon' aria-hidden='true'>
          <use :xlink:href='Icon(item)'></use>
        </svg>
        {{item.title}}
      </li>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: 'SwitchItem',

  props:{
    // 展示列表数据
    list: Object
  },

  watch: {
    list(){
      this.amin = true
    }
  },

  data() {
    return {
      a: 0,
      amin: true
    };
  },

  filters: {
    getId(obj){
      let id = ''
      Object.keys(obj).forEach(v => {
        if(v.indexOf('id') != -1){
          id = obj[v]
        }
      })
      return id
    }
  },

  computed: {
    // 返回相应图标
    Icon(){
      return item => {
        if(item.articleid)return '#icon-wenzhang'
        else if(item.topicsid)return '#icon-chaojihuati'
        else if(item.messageid)return '#icon-zixun1'
        else return '#icon-zixun1'
      }
    }
  },

  methods: {
    // 跳转页面
    toPage(item){
      let routeData = null
      if(item.articleid){
        routeData = this.$router.resolve({
          path: '/article/' + item.articleid,
        })
      }else if(item.topicsid){
        routeData = this.$router.resolve({
          path: '/topic/' + item.topicsid,
        })
      }else if(item.messageid){
        window.open(item.url,'_blank')
      }else{
        routeData = this.$router.resolve({
          path: '/404'
        })
      }
      window.open(routeData.href, '_blank')
    }
  },
};
</script>

<style scoped>
.switch-item{
  width: 100%;
  transition: all .5s ease;
  font-size: 0.9rem;
}
.switch-item ul{
  width: 100%;
  height: 360px;
  overflow: hidden;
  background-image: url('../../../assets/image/toroomBG.jpg');
  background-size: cover;
}
.switch-item li{
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding-left: 20px;
  border-top: 1px solid gray;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: gray;
  transition: all .3s ease;
}
.switch-item li:hover{
  color: red;
  background-color: rgba(0,0,0,.3);
}
.switch-item li a{
  display: block;
  width: 100%;
  height: 100%;
}
</style>